{% extends "base.html" %}

{% block subtitle %}
  Preferences
{% endblock subtitle %}

{% block navbar_breadcrumb %}
  <ul class="nav navbar-nav oppia-navbar-breadcrumb">
    <li>
      <span class="oppia-navbar-breadcrumb-separator"></span>
      Preferences
    </li>
  </ul>
{% endblock navbar_breadcrumb %}

{% block header_js %}
  {{ super() }}
  <script type="text/javascript">
    GLOBALS.LANGUAGE_CODES_AND_NAMES = JSON.parse(
      '{{LANGUAGE_CODES_AND_NAMES|js_string}}');
  </script>
{% endblock header_js %}

{% block content %}
  <div class="container" ng-controller="Preferences">
    <div class="row">
      <h1>Edit Preferences</h1>
      <div style="color: #666; font-size: 0.9em; margin-bottom: 20px; margin-top: -18px;">
        Any changes that you make on this page will be auto-saved.
      </div>
    </div>

    <div class="row">
      <div role="form" class="form-horizontal">
        <div class="form-group">
          <label class="col-lg-2 col-md-2 col-sm-2">Email address</label>
          <div class="col-lg-10 col-md-10 col-sm-10">
            {{user_email}}
            <span class="help-block" style="font-size: smaller">
              Only moderators and site admins can see this.
            </span>
          </div>
        </div>
      </div>

      <div role="form" class="form-horizontal">
        <div class="form-group">
          <label class="col-lg-2 col-md-2 col-sm-2">Username</label>
          <div class="col-lg-10 col-md-10 col-sm-10">
            {% if username %}
              {{username}}
            {% else %}
              <em>Not yet selected</em>
            {% endif %}
          </div>
        </div>
      </div>

      <div role="form" class="form-horizontal">
        <div class="form-group">
          <label class="col-lg-2 col-md-2 col-sm-2">Profile picture</label>
          <div class="col-lg-10 col-md-10 col-sm-10">
            <div class="oppia-editable-section" title="Change profile picture" style="height: 150px; width: 150px">
              <div class="oppia-click-to-start-editing" ng-click="showEditProfilePictureModal()"></div>
              <span class="glyphicon glyphicon-pencil oppia-editor-edit-icon" style="right: 5px;"></span>
              <img ng-if="profilePictureDataUrl" ng-src="<[profilePictureDataUrl]>" class="img-thumbnail">
              <img ng-if="!profilePictureDataUrl" src="/images/no_profile_picture.png" class="img-thumbnail">
            </div>
          </div>
        </div>
      </div>

      <hr>

      <div role="form" class="form-horizontal">
        <div class="form-group">
          <label class="col-lg-2 col-md-2 col-sm-2">Bio</label>
          <div class="col-lg-10 col-md-10 col-sm-10">
            <textarea ng-model="userBio" ng-blur="saveUserBio(userBio)" rows="5"></textarea>
            <span class="help-block" style="font-size: smaller">
              This field is optional. Anything you write here is public and
              world-viewable.
            </span>
          </div>
        </div>
      </div>

      <div role="form" class="form-horizontal">
        <div class="form-group">
          <label class="col-lg-2 col-md-2 col-sm-2">Preferred Languages</label>
          <div class="col-lg-10 col-md-10 col-sm-10">
            <!--
              If the ng-if is omitted, the select2-dropdown directive won't be
              updated after the initial page load.
            -->
            <div ng-if="hasPageLoaded">
              <select2-dropdown choices="LANGUAGE_CHOICES"
                item="$parent.preferredLanguageCodes" allow-multiple-choices="true"
                new-choice-regex=".^" width="400"
                placeholder="Select preferred languages..."
                on-selection-change="savePreferredLanguageCodes($parent.preferredLanguageCodes)">
              </select2-dropdown>
            </div>
            <span class="help-block" style="font-size: smaller">
              These languages will be selected by default when you search the
              gallery for explorations.
            </span>
          </div>
        </div>
      </div>
    </div>
    <script type="text/ng-template" id="modals/editProfilePicture">
      <div class="modal-header">
        <h3>Upload Profile Picture</h3>
      </div>

      <div class="modal-body" style="min-height: 300px;">
        <div class="oppia-profile-image-uploader">
          <div ng-hide="uploadedImage">
            <image-uploader on-file-changed="onFileChanged">
            </image-uploader>
          </div>

          <div class="oppia-form-error" ng-if="invalidImageWarningIsShown" style="margin-top: 15px;">
            Error: Could not read image file.
          </div>

          <div ng-show="uploadedImage">
            Drag to crop and resize:
            <div class="oppia-profile-picture-crop-area" ng-show="uploadedImage">
              <button class="btn btn-default oppia-profile-picture-reset-button" ng-click="reset()">
                <span class="glyphicon glyphicon-remove"></span>
              </button>
              <img-crop image="uploadedImage" result-image="croppedImageDataUrl"
                        area-type="square" result-image-size="150"
                        on-load-error="onInvalidImageLoaded()"
                        result-image-format="image/png">
              </img-crop>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button class="btn btn-default" ng-click="cancel()">Cancel</button>
        <!--
          The two checks for ng-disabled are necessary. The former is needed because
          img-crop loads a default white image even when nothing is uploaded. The latter
          is needed to prevent the saving of invalid files.
        -->
        <button class="btn btn-success" ng-click="confirm()" ng-disabled="!uploadedImage || !croppedImageDataUrl">
          Add Profile Picture
        </button>
      </div>
    </script>
  </div>
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('/profile/Preferences.js') }}
  </script>
{% endblock footer_js %}
